<template>
	<div class="all">
		<div class="box">
			<div class="header">

				<p>司机装车</p>
			</div>

		</div>

		<uni-notice-bar show-icon scrollable text="请上传真实数据,保证照片清晰,避免影响运费结算。" />
		<uni-section title="上传图片" type="line">
		</uni-section>
		<div class="tj">
			<div class="ima1"><img class="ima" src="/static/添加.png" alt=""></div>

			


		</div>
		<div class="tj">
		

			<div class="ima3">
				<p>上传磅单</p>
			</div>


		</div>
		<uni-section title="卸车信息" type="line"></uni-section>
		<view style="background-color: white;">
			<view style="width: 370px;display: inline-block;float: left;background-color: white;">
				<text style="font-size: 20px; ">* 进站时间</text>
			
		
						<uni-datetime-picker type="date" :clear-icon="false" v-model="single" @maskClick="maskClick" style="width: 50px;height: 100%;display: inline-block;float: right; "/>
					</view>
			
		</view>
		<view style="background-color: white;">
			<view style="width: 370px;display: inline-block;float: left;background-color: white;">
				<text style="font-size: 20px; ">* 卸车毛重</text>
			
			<text style="font-size: 20px;float: right;">吨</text>
			<textarea style="width: 50px;height: 25px;display: inline-block;float: right; "placeholder="请输入"></textarea>
			</view>
		</view>
<view style="background-color: white;margin-top:60px; ">
			<view style="width: 370px;display: inline-block;float: left;background-color: white;">
				<text style="font-size: 20px; ">* 卸车毛重</text>
			
			<text style="font-size: 20px;float: right;">吨</text>
			<textarea style="width: 50px;height: 25px;display: inline-block;float: right; " placeholder="请输入"></textarea>
			</view>
		</view>
<view style="background-color: white;margin-top:60px; ">
			<view style="width: 370px;display: inline-block;float: left;background-color: white;">
				<text style="font-size: 20px; "></text>
			
			<text style="font-size: 20px;float: right;">吨</text>
			<textarea style="width: 50px;height: 25px;display: inline-block;float: right; " placeholder="皮重:"></textarea>
			</view>
		</view>
		<div class="button1">
			<view class="warp">
				<button class="button" type="primary" @click="switchBtn(0)">提交</button>

			</view>
		</div>
	
	</div>



	</div>




</template>

<script>
	export default {
		data() {
			return {
				dynamicList: [],
				list: [{
						url: '/static/c1.png',
						text: '联系开票',
						badge: '0',
						type: "primary"
					},
					{
						url: '/static/c2.png',
						text: '异常上报',
						badge: '1',
						type: "success"
					},

					{
						url: '/static/c4.png',
						text: '查看详情',
						badge: '2',
						type: "error"
					}
				]
			}
		},
		onLoad() {

		},
		methods: {

		}
	}
</script>

<style>
	* {
		padding: 0;
		margin: 0;
	}

	li {
		list-style: none;
	}

	.liBox1 {
		border-left: 10px black solid;
		padding: 10px 20px;
		background-color: white;
	}

	.liBox1 li {
		position: relative;
		margin: 10px 0 0 10px;
		padding-left: 20px;
	}

	.liBox1 li:nth-child(1) {
		/* border-left: 1px dashed grey; */
	}

	.liBox1 li img {
		position: absolute;
		left: -15px;
		top: 0;
		width: 30px;
		height: 30px;

	}

	.liBox1 li p {
		font-size: 16px;
		color: grey;
	}

	.text {
		color: #808080;
	}


	.button {
		border-radius: 25px;
	}

	.button4 {
		height: 50px;
		line-height: 25px;
		display: inline-block;
		margin-right: 120px;

	}


	.button1 {
		height: 30px;
		width: 180px;
		margin-left: 25%;
		;
		margin-top: 200px;

	}

	.button3 {
		height: 50px;
		background-color: #CCFFFF;
		margin-top: 18px;
		border-radius: 25px;
		text-align: center;
		position: relative;
	}

	.button2 {
		height: 100%;
		margin: 0 auto;
		margin-top: 35px;
		border: none;
	}

	.text0 {
		margin-top: 20px;
	}

	.text1 {
		color: darkred;
	}

	* {
		margin: 0;
		padding: 0;
	}

	li {
		list-style: none;
	}

	.box {
		background: white;
		color: white;
		text-align: center;
		padding: 20px;
	}

	.box1 {
		background: white;
		color: white;
		text-align: center;
		padding: 20px;
		height: 100%;
	}

	.header {

		position: relative;


	}

	.header p {
		color: black;
		font-size: 18px;
	}

	.nav {
		display: flex;
		background: #333EDE;
	}

	.nav .liBox {
		flex: 1;
		position: relative;
	}

	.liBox div {
		border: 1px white solid;
		margin: 10px 0;
	}

	.liBox div span {
		position: absolute;
		display: inline-block;
		top: 5px;
		border: 1px #333EDE solid;
		background-color: white;
		width: 10px;
		height: 10px;
		border-radius: 50%;
	}

	.nav .liBox:nth-child(5) div span {
		background-color: #333EDE;
		border: 3px white solid;
		box-sizing: border-box;
	}

	.nav .liBox:nth-child(5) {
		/* opacity: 0.3; */
	}

	.p {
		font-family: fangsong
	}

	.ima1 {
		background-color: #FFFFFF;
		display: inline-block;
		height: 150px;
		width: 100%;
		float: left;
		display: flex;
		flex-flow: row nowrap;
		justify-content: center;
		align-items: center;
	}

	.ima2 {
		background-color: #FFFFFF;
		display: inline-block;
		height: 150px;
		width: 50%;
		display: flex;
		flex-flow: row nowrap;
		justify-content: center;
		align-items: center;
	}

	.ima3 {
		background-color: #FFFFFF;
		display: inline-block;

		width: 50%;
		display: flex;
		flex-flow: row nowrap;
		justify-content: center;
		align-items: center;
		margin-top: -90px;
	}

	.tj {
		display: flex;
		flex-flow: row nowrap;
		justify-content: center;
		align-items: center;
	}

	.ima {

		height: 50px;
		width: 50px;
		margin: 0 auto;
	}

	.image {
		width: 25px;
		height: 25px;
	}
</style>
